<template>
    <div>
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <div class="main">
            <p class="d1">{{crowdfunding.crowdfundingName}}</p>
            <img :src="crowdfunding.crowdfundingImage" alt="">
            <p class="d2">￥{{crowdfunding.crowdfundingPrice}}</p>
            <p class="d3">截止日期：{{TT}}</p>
            <p class="d4">项目结束后筹资未完成将全额退款!</p>
        </div>
        <div class="blo"></div>
        <van-action-bar class="buy">
            <van-action-bar-icon icon="like-o" text="收藏" @click="col" />
            <van-action-bar-button type="danger" text="支持" @click="btn" />
        </van-action-bar>
    </div>
</template>

<script>
import axios from 'axios'
import router from '@/router'
import { Toast } from 'vant';
    export default {
        setup() {
            const onClickIcon = () => Toast('收藏');
            const onClickButton = () => Toast('购买');
            const onClickLeft = () => history.back();
            return {
                onClickIcon,
                onClickButton,
                onClickLeft,
            };
        },
        data() {
            return {
                crowdfunding: [],
                id: this.$route.params.id,
            }
        },
        created() {
            axios.get('http://localhost:8087/crowdfunding/getById/'+this.id).then((res)=>{
                this.crowdfunding = res.data.data;
                // console.log(this.crowdfunding);
                console.log(res);
            })
        },
        computed: {
            TT(){
                let times = this.crowdfunding.crowdfundingDeadline.substr(0,10)+''; 
                return `${times}`
            },
        },
        methods: {
            btn(){
                axios.post('http://localhost:8087/buyCrowdfunding/add', {
                    id: Math.random()*1000000,
                    userId: sessionStorage.getItem('userId'),
                    crowdfundingId: this.crowdfunding.crowdfundingId,
                    name: this.crowdfunding.crowdfundingName,
                    crowdfundingNumber: this.crowdfunding.crowdfundingPrice,
                    crowdfundingImage: this.crowdfunding.crowdfundingImage,
                    buycrowdfundingTime: this.crowdfunding.crowdfundingDeadline,
                }).then(function() {
                    // router.push('/ppc')
                    Toast.success('购买成功');
                }).catch(function (error) {
                    console.log(error);
                })
            },
            col(){
                axios.post('http://localhost:8087/collection/saveCollection', {
                    collectionId: Math.random()*1000000,
                    collectionCrowdfunding: this.crowdfunding.crowdfundingName,
                    crowdfundingPrice: this.crowdfunding.crowdfundingPrice,
                    crowdfundingImg: this.crowdfunding.crowdfundingImage,
                }).then(function() {
                    // router.push('/ppc')
                    Toast({
                        message: '收藏成功',
                        icon: 'like-o',
                    });
                }).catch(function (error) {
                    console.log(error);
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        text-align: left;
        margin-left: 5vw;
        .d1{
            margin-top: 5vw;
            font-weight: bold;
            font-size: 5vw;
        }
        img{
            width: 90vw;
            height: 60vw;
            margin-top: 6vw;
        }
        .d2{
            margin-top: 6vw;
            font-weight: bold;
            font-size: 5vw;
            color: red;
        }
        .d3{
            margin-top: 4vw;
            font-size: 4vw;
        }
        .d4{
            margin-top: 6vw;
            font-size: 4vw;
            color: red;
        }
    }
    .blo{
        height: 1vw;
        margin-top: 4vw;
        background-color: #eee;
    }

    ::v-deep .van-icon-arrow-left:before{
        color: #000;
        font-weight: bold;
        font-size: 5vw;
        margin-top: 2vw;
    }
    .buy{
        z-index: 3;
    }
</style>